<template>
	<view class="px-10 pb-safe-area">
		<y-tabs :list="categoryList" @change="paging.reload()" v-model="type" ></y-tabs>
		<z-paging ref="paging" v-model="list" @query="getList" :use-page-scroll="true" :auto="false">
			<view v-for="(item,index) in list" :key='item.id' class="flex bg-white flex-y-center p-10 round-8 wa mt-8"
				@click="$page.open('/pages/article/index?id='+item.id)">
				<image :src="item.cover" class="w-120 h-70 round-8"></image>
				<view class="flex flex-column  p-8 h-70">
					<view class="fs-16 fw-bold flex-1">{{item.title}}</view>
					<text class="fs-12 text-999">{{item.create_time}}</text>
				</view>
			</view>
		</z-paging>

	</view>
</template>

<script setup>
	import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";
	import { ref } from 'vue'
	import { getArticleList, getCate } from '@/api/article.js'
	import { onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app'
	import { $tool, $page } from "@/utils";
	const type = ref(0)
	const paging = ref(null)
	const list = ref([])
	useZPaging(paging)

	onLoad(() => {
		getCategory()
	})
	const categoryList = ref([])
	const getCategory = () => {
		getCate().then(res => {
			categoryList.value = res.data
			type.value = categoryList.value[0]['value']
			paging.value.reload()
		})
	}

	const getList = (page, limit) => {
		getArticleList({ page: page, limit: limit, category_id: type.value }).then(res => {
			paging.value.complete(res.data)
		})
	}
</script>

<style>

</style>